﻿import {createReactEditorJS} from 'react-editor-js'
import {EDITOR_JS_TOOLS} from './editorTools'
import {useRef} from "react";

const ReactEditorJS = createReactEditorJS()

function MarkDown() {
    const editorCore = useRef(null)

    const handleInitialize = (instance) => {
        editorCore.current = instance
    }

    const handleSave = async () => {
        const savedData = await editorCore.current.save()
        console.log(JSON.stringify(savedData, null, 2))
    }

    return (
        <div className="editor-container">
            <ReactEditorJS
                tools={EDITOR_JS_TOOLS}
                onInitialize={handleInitialize}
                defaultValue={{
                    blocks: [
                        {
                            type: "header",
                            data: {text: "欢迎使用编辑器", level: 2}
                        }
                    ]
                }}
            />
            <button onClick={handleSave}>保存内容</button>
        </div>
    )
}

export default MarkDown